/**
 * @author hzh
 * version 0.1
 * Date: 2017-9-1
 * 关于试衣间的插件
 *
 * 参数
 * [opts description]
 * @elem {画布父节点}
 * @BMIType {模特体型}
 * @height {模特身高}
 * @weight {模特体重}
 * @rotateType {当前是第几面}
 * @sex {性别}
 * @cvsWidth {画布的宽}
 * @cvsHeight {画布的高}
 * @head {模特头}
 * @body {模特身体}
 * @shoes {鞋子}
 * @underwear {内衣}
 * @knicker {内裤}
 * @shirt {短袖 T-shirt}
 * @coat {外套 大衣}
 * @trouser {裤子}
*/

"use strict";

const merge = require('webpack-merge');

class FitRoom {

	//构造函数
	constructor (options) {

		// 合并参数
		this.options = merge({
			elem: '.fit-model',
			height: 180, 
			weight: 70, 
			rotateType: 0, 
			sex: 'woman', 
			images: {
				// 内衣裤
				// shoes:'http://localhost:8002/images/woman/shoes1.png',
				// underwear:'http://localhost:8002/images/cloth/star/yi1.png',
				// knicker:'http://localhost:8002/images/cloth/star/ku1.png',

				// 衣服
				shirt: '',
				coat: '', 
				trouser: ''
			}
		}, options);	

		this.BMIType = this.BMI(this.options.weight, this.options.height);		

		// 模特	
		this.options.images.body = 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/body.png';
		this.options.images.head = 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/head.png';
		this.options.images.hair = 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/hair.png';

		// 画布规格
		this.height = 1000;
		this.width = 360;

		// 加载的面 (正面、侧面)
		this.renderNum = 0;

		//比率
		this.rate = 5.6;

		//存储模特身体的点
		this.modelBody = localStorage.getItem("modelBody");

		// 画布
		this.allCvs = document.createElement('canvas');
		this.allCvs.setAttribute('width', this.width);
		this.allCvs.setAttribute('height', this.height);
		this.allCvs.setAttribute('id', 'allFit');
		this.allCvs.setAttribute('style', 'width: '+ this.width / 100 +'rem');
		this.allCtx = this.allCvs.getContext('2d');

		// 所有画布 
		this.renderNum = 0; 

		this.Promises = [];	
		this.clothImg = {};
		this.render();
	};

	//更新参数
	update (options) {		
		this.options = merge(this.options, options);
		this.BMIType = this.BMI();

		// 更新画布		
		this.allCtx.clearRect(0, 0, this.width, this.height); 
		this.render();
	};

	// 画布渲染
	render () {	

		// 模特身体
		let allImage = this.options.images;	
		let that = this;
		let cloth;

		// 图片类型
		for(cloth in allImage) {
			let clothUrl = allImage[cloth];	
			//图片加载
			if (typeof clothUrl === 'string' && clothUrl) {
				this.clothImg[cloth] = new Image();  
		        this.clothImg[cloth].onload = null; 
		        this.clothImg[cloth].setAttribute('class', cloth)

		        let newPromise = new Promise( (resolve, reject) =>{

		        	// 图片加载成功	
		        	that.clothImg[cloth].onload = function(){  	
		        		let nowCloth = this.getAttribute('class');
		        		if(nowCloth != 'head' && nowCloth != 'hair' && nowCloth != 'body' && nowCloth != 'underwear' && nowCloth != 'knicker' && nowCloth != 'shoes') {
		        			that[nowCloth + 'Cvs'] = document.createElement('canvas');
							that[nowCloth + 'Cvs'].setAttribute('width', that.width);
							that[nowCloth + 'Cvs'].setAttribute('height', that.height);
							that[nowCloth + 'Ctx'] = that[nowCloth + 'Cvs'].getContext('2d');
		        			that[nowCloth + 'Ctx'].drawImage(this, 0, 148);
		        		} 

						resolve(true);	
					}

					// 图片不存在
					that.clothImg[cloth].onError = function() {
						reject(false)
					}
				})

			    this.clothImg[cloth].src =  allImage[cloth];  

				this.Promises.push(newPromise);
			} else {
				//清除画布
				!this[cloth + "Ctx"] || this[cloth + "Ctx"].clearRect(0, 0, this.width, this.height); 
			}
		}

		// 先渲染模特
		Promise.all(this.Promises).then(() => {
			that.allCtx.drawImage(that.clothImg.body, 0, 148);
			that.allCtx.drawImage(that.clothImg.head, 129, 25);
			that.allCtx.drawImage(that.clothImg.hair, 129, 25);
			that.sprite();
		})
	};

	
	// 体型判断
	BMI (weight, height) {
		let BMIType, BMI = weight / ((height / 100) * (height / 100));
		if (BMI < 18.5) {
			BMIType = "thin";
		} else if (BMI >= 18.5 && BMI < 24) {
			BMIType = "norm";
		} else if (BMI >= 24.0 && BMI < 28) {
			BMIType = "sfat";
		} else if (BMI >= 28) {
			BMIType = "fat";
		}

		return BMIType;
	}

	//遍历颜色---如果是透明则返回
	getBlanks (context, pointX, pointY, imgWidth, imgHeight) {
		let imageData = context.getImageData(0, 0, imgWidth, imgHeight);
		let vdata = imageData.data;

		for (let y = pointY - 1; y < imgHeight - pointY - 1; y++) {
			if (this.getRBG(vdata, pointX, y).opacity === 0) {
				return y;
			}
		}
	};

	// 返回颜色
	getRBG (vdata, x, y) {
		let offset = imgWidth * y + x;
		return {
			red: vdata[offset * 4],
			green: vdata[offset * 4 + 1],
			blue: vdata[offset * 4 + 2],
			opacity: vdata[offset * 4 + 3]
		};
	};

	//魔棒工具
	magicWand (rotateType) {
		this.sprite(rotateType);
	}

	// 合成图片
	sprite () {			
		!this.trouserCvs || this.allCtx.drawImage(this.trouserCvs, 0, 0);
		!this.shirtCvs || this.allCtx.drawImage(this.shirtCvs, 0, 0);
		!this.coatCvs || this.allCtx.drawImage(this.coatCvs, 0, 0);
		let $elem = document.querySelector(this.options.elem)
		if($elem) $elem.appendChild(this.allCvs);
	}
}

export default new FitRoom({})
// export default FitRoom;
